<template>
    <div>
        <el-row>
            <el-col :span="24">
                        <el-form ref="form" :rules="rules" :model="form" label-width="100px">
                            <el-form-item label="渠道" prop="source">
                                <select-app-source v-model="form.source" :form="true" :clearable="false"></select-app-source>
                            </el-form-item>
<!--                            <el-form-item label="开始时间" prop="start_at">-->
<!--                                <el-date-picker type="datetime" v-model="form.start_at" value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择"/>-->
<!--                            </el-form-item>-->
<!--                            <el-form-item label="结束时间" prop="end_at">-->
<!--                                <el-date-picker type="datetime" v-model="form.end_at" value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择"/>-->
<!--                            </el-form-item>-->
                            <el-form-item label="状态">
                                <el-radio-group v-model="form.status">
                                    <el-radio-button :label="item.value" v-for="(item, index) in options.status" :key="index">{{ item.label }}</el-radio-button>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="内容" prop="content">
                                <el-input type="textarea" v-model="form.content" :autosize="{ minRows: 4}" placeholder="请输入内容, 支持简单HTML标签"></el-input>
                            </el-form-item>

                            <el-form-item>
                                <el-button type="primary" :loading="loading" @click="submit">确定</el-button>
                        <el-button @click="cancel">返回</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        props: {
            data: {

            }
        },
        data() {
            return {
                loading: false,
                form: {},
                formDefault: {
                    id: 0,
                    start_at: '',
                    end_at: '',
                    status: 1,
                    source: '',
                    content: '',
                },
                rules: {
                    start_at: [
                        { required: true, message: '请选择开始时间', trigger: 'blur' },
                    ],
                    send_cnt: [
                        { required: true, message: '请输入发送次数', trigger: 'blur' },
                    ],
                    interval: {
                        trigger: 'blur',
                        validator: (rule, value, callback) => {
                            if (isNaN(parseInt(value))) {
                                callback(new Error('格式不正确'));
                                return
                            }
                            if (value > 0 && value < 60) {
                                callback(new Error('如果设置了间隔时间, 间隔时间应该超过60秒'));
                                return
                            }
                            callback();
                        }
                    },
                    content: [
                        { required: true, message: '请输入内容', trigger: 'blur' },
                    ],
                },
                options: this.$store.state.announce.options,
            }
        },
        computed: {},
        watch: {
            data (newVal) {
                this.syncForm();
            }
        },
        methods: {
            getFormAction() {
                return this.form.id ? 'announce/Update' : 'announce/Store';
            },
            submit() {
                this.$refs.form.validate(valid => {
                    if (!valid) return false;
                    this.loading = true;
                    this.$store.dispatch(this.getFormAction(), this.form).then(res => {
                        this.$message.success(res.data.message);
                        this.$emit('submit');
                    }).finally(() => {
                        this.loading = false;
                    });
                });
            },
            cancel() {
                this.$emit('cancel');
            },
            syncForm() {
                this.form = this.$helper.deepClone(Object.assign({}, this.formDefault, this.data));
            }
        },
        created () {
            this.syncForm();
        }
    }
</script>

<style lang="scss" scoped>
.item-row {
    margin: 0 0 10px 0;
}
</style>

